/*
@author: stanfor
@date: 2022/8/6 12:14
@Version: 1.0
@last modify time : 2022/8/6 12:14
*/

import React, { useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import { Spin} from 'antd';
import './index.less';

/** ExitAnimation(退场动画)组件说明
* @author: JasonStandFor
* @description Desc:: 退场动画, 目前使用纯函数, 暂不接受任何参数导入
* @return ExitAnimation
* @example:
<ExitAnimation />
* */
const Index = () => {
  const [isGradient, setIsGradient] = useState(false);
  const H = useHistory();
  useEffect(() => {
    let gradientTimer = null;
    let transitionTimer = null;
    clearTimeout(gradientTimer);
    clearTimeout(transitionTimer);
    gradientTimer = setTimeout(() => {
      H.push('/login');
      clearTimeout(gradientTimer);
    }, 2000);

    transitionTimer = setTimeout(() => {
      setIsGradient(true);
      clearTimeout(transitionTimer);
    }, 1000);

    return () => {
      clearTimeout(gradientTimer);
      clearTimeout(transitionTimer);
    }
  }, []);

  return (
    <div className="common-component-exit-animation">
      <div className="common-component-exit-animation-warp">
        <div className={`common-component-exit-animation-spin ${isGradient ? 'exit-action-show' : ''}`}>
          <Spin tip="页面已释放，正在前往登录页..." size="large" />
        </div>
      </div>
    </div>
  );
};

export default Index;
